Bullets and menu arrow misaligned in IE

See screenshot, the alignment of various bullets and menu arrows needs work.

I'm assigning this to myself, I'm basically putting ye old hand up and taking on the IE stuff from here on in, this needs a lot of focus and testing so I think its worth me specializing in this area I know well - and I use Windows for development so I'm well set up for it.

What this patch does:

Makes a fundamental switch from list-style-image to background-image. Core uses list-style-image, but this has the limitation of not being able to position the image (other than changing the image), by using the background property we can position the image where we want.

The patch is not trivial and needs some heavy testing - their are the immediate issues with RTL and IE, especially in RTL. For IE6 RTL I have simply included deprecated appropriate list-style and removed the background (many issues here for RTL).

I've tested in FF, IE6/7/8 and Safari and so far it looks pretty solid. One test is to re size the text and see what happens - this is very important that you can reasonably re-size the text (proper text zoom) and not have it break.

This uses the core images, so the paths for images are ../../../misc/menu-expanded.png etc so Bartik must be installed in /themes for this to work.

To be frank this should probably be a core patch, but its late for that and could be much harder to push in to core. I meant to fix this in D7 but oh well, it'll be for D8...

Screenshots are coming, first I need some dinner :)

Unassigned - on vacation for the next week!

I updated this patch to rip the background images right out of IE6 altogether, I started getting some issues with it (background-image won't appear sometimes, or only on hover, I know this is a known bug in IE6 but I can't recall the fix...).

I'm not going to push real hard for this to get in, especially if someone has a more simple fix to bring to the table, mainly because it is such a fundamental change, but actually how most sites do this IMO (certainly how I would approach it, I cannot imagine using list-style-image because of the lack of positioning).

Firefox, Safari and IE8 all have practically identical rendering both before and after the patch, although the patch does move the bullets a little closer to the anchors.

IE7 and Opera have virtually identacal both before and after, that is before the patch all the bullets sit a little high, both in LTR and RTL mode. After the patch they are perfectly centered.

Heres some screenshots to show the difference, arguably IE7 is a more important browser so that's the one I have really focused on, while giving poor old IE6 a rather degraded buzz this time around.

+++ css/ie6.css	17 May 2010 23:35:02 -0000
@@ -3,6 +3,28 @@
+  margin: 0 0 0 1.25em ; /* LTR */

extra space before ';'

+++ css/style.css	17 May 2010 23:35:03 -0000
@@ -1199,3 +1199,33 @@
+  background: url("../../../misc/menu-leaf.png") no-repeat left 0.55em; /* LTR */

I dont know if this is the right way (or if there is a right way) to handle images that live outside the theme from within the theme. Are there other places that we do this? I guess it just feels dirty.

Powered by Dreditor.

This: url("../../../misc/menu-leaf.png")

Is basically strait out of core - system-menu.css

The whole patch probably needs to be rerolled, I don't have time.

This can be fixed, its not that hard. We should have some new images also - the ones from core are maybe good for stark/core but have been around forever and look worn out and a bit lame in our brand new theme.

re-roll

hmmm, isn't this the same problem for every theme.
Can't we fix this in core?

Srry if I missed something.

Probably, actually the more I look at this I realize that normally I would put the image on the anchor and not the li.

1. It happens not only in IE7. In IE6 as well.
2. Not only in Bartik but in all core themes.
3. It is a bug - unaccounted behavior of the major browser. Should have been adapted.

Changing from image to background seems to be the right decision.
Still there could be a problem. If a line-height is explicitly set (in absolute units or irrelevant to font size) relative padding will not solve the problem.
If it is impossible to vertical-align it per line middle, then it is better to remove it from core system-menus.css, reset it to html ul defaults, and images to move to theme folders.

@Jeff Burnz #7

I updated this patch to rip the background images right out of IE6 altogether, I started getting some issues with it (background-image won't appear sometimes, or only on hover, I know this is a known bug in IE6 but I can't recall the fix...).

It could be due to D7 css complexity and should be tested with ul reset:
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}

But I'm not sure. Probably you are right and it's just a IE6 bug.

Yes, I agree we can make many improvements around this, really I posted this patch to generate discussion and get it moving towards something core worthy. Lets keep working on it.

OK, lets have a crack at a core patch. I've included changes for system, toolbar, seven, garland and bartik - and RTL also. Looking pretty good in my testing IE6, 7, 8, Chrome and Firefox. I tried to keep this simple and make it easy to override as well.

Rational: as far back as I can recall Drupal has used list-style-image to apply custom bullets to menu list items. This is quite out of line with modern theming practice where we all use the "background" property because unlike list-style-image background images can be positioned, which gives a much higher degree of accuracy and flexibility. list-style-image also has umpredictable results in various browsers, as we have seen for a long time that bullets never quite looked right in any core theme when using Internet Explorer - by switching to background image this can actually be fixed.

Know issue that needs discussion - the patch uses background position "center" for the vertical alignment, so if the anchor text spans two lines or more the bullet will be vertically centered between the two lines - to higher price to pay? Not sure, its very simple although we could use some actual values to push the bullets into the correct position.

You need the new menu-expanded.png attached (goes in /misc).

needs review, change component (these are CSS changes not markup).

farg... removed empty selector, use image in #18.

@#15
It works, and can be done by changing
from:
li.collapsed {background: url(../../../misc/menu-collapsed.png) no-repeat left 0.55em;}
to:
li.collapsed {background: url(../../../misc/menu-collapsed.png) no-repeat left center;}
The same goes for expanded and leaf.
Now it provides cross-browser compatibility and is irrelative to line height.
To look perfectly it is necessary to change the icons a bit - they should be "aligned" to left and centered vertically.
But there is one negative effect. If a link is long, and wraps, it will increase line-height and the image will be still verically-aligned (so it will not be centered per first line).
So probably the current patch in #12 with relative background top padding is the best solution. But it means we need conditional css for IE.

@#18
Ah, you were faster. Right, there's a problem with wrapping links.

It's too late for this, and it belongs in markup (we are working on getting the component name changed, btw).

#20: system-menus-779174-list-images_2.patch queued for re-testing.

I'm pretty sure this is not more an issue in current HEAD, but needs check

Bullets look fine in IE11 which is the only remaining supported version.